<template>
  <page-layout background="transparent">
    <tips-card>
      <div slot="title">信息维护</div>
      <div>
        您可以变更您的基础信息。
      </div>
    </tips-card>
    <div class="user-info">
      <Row :gutter="20">
        <i-col :span="12">
          <div class="info-item">
            <span class="label">登录账号：</span>
            <span>{{$store.state.user.userName}}</span>
          </div>
          <div style="width:350px;">
            <Form ref="form"
                  :model="form.data"
                  :rules="form.rule"
                  :label-width="120">
              <Form-item :label="`${form.label.avatar}：`"
                         prop="avatar">
                <Avatar v-model="form.data.avatar"
                        :config="{
                  bucket: 'coa-admin-public',
                  endpoint: 'coa-public.oss.somibo.cn'
                }" />
              </Form-item>
              <Form-item :label="`${form.label.nickName}：`"
                         prop="nickName">
                <i-input v-model="form.data.nickName"
                         :placeholder="form.placeholder.nickName">
                </i-input>
              </Form-item>
              <Form-item :label="`${form.label.pwd}：`"
                         prop="pwd">
                <i-input v-model="form.data.pwd"
                         type="password"
                         :placeholder="form.placeholder.pwd">
                </i-input>
              </Form-item>
              <Form-item :label="`${form.label.pwdRepead}：`"
                         v-if="form.data.pwd"
                         prop="pwdRepead">
                <i-input v-model="form.data.pwdRepead"
                         type="password"
                         :placeholder="form.placeholder.pwdRepead">
                </i-input>
              </Form-item>
              <Form-item :label="`${form.label.oldPwd}：`"
                         v-if="form.data.pwd"
                         prop="oldPwd">
                <i-input v-model="form.data.oldPwd"
                         type="password"
                         :placeholder="form.placeholder.oldPwd">
                </i-input>
              </Form-item>
              <Form-item>
                <Button type="primary"
                        @click="modify">修改</Button>
              </Form-item>
            </Form>
          </div>
        </i-col>
        <i-col :span="12">
          <div class="info-item">
            <span class="label">最近登录IP：</span>
            <span>{{$store.state.user.lastLoginIp}}</span>
          </div>
          <div class="info-item">
            <span class="label"
                  style="width:">最近登录时间：</span>
            <span>{{$store.state.user.lastLoginTime | datetime('yyyy-MM-dd HH:mm:ss')}}</span>
          </div>
        </i-col>
      </Row>
    </div>
  </page-layout>
</template>

<script>
import Form from './form'
import TipsCard from '@vue-common/components/common/tips-card'
import Service from './service'
import Avatar from '@vue-common/components/iview/avatar/ali-oss'
// import UserService from '@common/services/user'
import { getBaseInfo } from '@/services/user'
export default {
  name: 'UserInfo',
  components: {
    TipsCard,
    Avatar
  },
  mounted () {
    this.form.data.nickName = this.$store.state.user.nickName
    this.form.data.avatar = this.$store.state.user.avatar
  },
  data () {
    return {
      form: Form()
    }
  },
  methods: {
    /**
     * 修改用户昵称
     */
    modify () {
      if (this.form.data.pwd) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.update()
          } else {
            this.$Message.error('请检查输入的信息是否有误')
          }
        })
      } else {
        this.update()
      }
    },
    update () {
      Service.modify(this.form.data).then(result => {
        if (result.isSuccess) {
          this.$Message.destroy()
          // 成功
          this.$Message.success('修改成功')
          this.$refs['form'].resetFields()
          getBaseInfo().then(() => {
            this.$nextTick(() => {
              this.form.data.nickName = this.$store.state.user.nickName
              this.form.data.avatar = this.$store.state.user.avatar
            })
          })
        } else {
          // 失败
          this.$Message.error(result.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.user-info {
  padding: 20px;
  background: #ffffff;
  margin-top: 10px;
  .info-item {
    margin: 20px 0;
    .label {
      width: 120px;
      display: inline-block;
      padding: 10px 12px 10px 0;
      text-align: right;
    }
  }
}
</style>
